<template>
    <div id="components-layout-demo-basic">
        <!-- <a-layout>
            <a-layout-header>

            </a-layout-header>
        </a-layout> -->
        <a-layout style="height: 100%;">
            <a-layout-content>
                <div id="leaferCanvas" ref="leaferCanvas" :style="{ background: background }"></div>
            </a-layout-content>
            <!-- <a-layout-sider v-model="collapsed_right" :trigger="null" collapsible collapsedWidth="30" width="480">
                <a-button shape="circle" class="fixd_btn_right" @click="closeColl_right"
                    :class="collapsed_right ? 'fixd_btn_left_after' : 'fixd_btn_right'">
                    <a-icon type="left" v-if="collapsed_right" />
                    <a-icon type="right" v-else />
                </a-button>
            </a-layout-sider> -->
        </a-layout>
    </div>

</template>

<script>
import { Leafer, PointerEvent, Group } from 'leafer-ui'
import { Arrow } from '@leafer-in/arrow'
import { TooltipPlugin } from 'leafer-x-tooltip-canvas'
import { getSensorData, getRegionData, getDrawListByOrgId } from './../../components/leafer/api'
import minx from './../../components/leafer/mixin'
export default {
    mixins: [minx],
    data() {
        return {
            collapsed_right: false,
            models: null,
            background: 'rgba(255,255,255,0)',
            modelList: []
        }
    },
    props: {
        systemType: {
            type: Number,
            default: 0
        },
        leafer: {
            type: Object,
            default: () => {
                return {}
            }
        }
    },
    mounted() {
        this.init()
    },
    methods: {
        async getLeafer(node) {
            let data = {
                orgId: node.id
            }
            const res = await getDrawListByOrgId(data)
            if (res.code === 200) {
                if (this.render) {
                    this.render.clear()
                    this.background = res.data.background
                    this.render.set(JSON.parse(res.data.pageData))
                    this.findModel()
                } else {
                    return res.data.pageData
                }
            }
        },

        async init() {
            const res = await this.getRegionList()
            const json = await this.getLeafer(res[0])
            if (json) {
                this.render = new Leafer({ view: this.$refs.leaferCanvas }, JSON.parse(json))
                new TooltipPlugin(this.render, {
                    info: ['width', 'height'],
                    includesType: ['Rect', 'Ellipse', 'Text', 'Line', 'Polygon'],
                    formatter: (item) => {
                        if (item.name === 'text') {
                            if (item.data && item.data.host && item.data.sensors) {
                                return `设备：${item.data.host.name} \n 传感器：${item.data.sensors.data.name}`
                            } else if (item.data && item.data.region && item.data.region.type) {
                                return `区域：${item.data.region.region.name} \n 类型：${item.data.region.type.description}`
                            } else if (item.data && item.data.region && !item.data.region.type) {
                                return `区域：${item.data.region.region.name}`
                            } else {
                                return `暂无绑定`
                            }
                        } else {
                            if (item.data && item.data.host) {
                                return `设备：${item.data.host.name}`
                            } else if (item.data && item.data.region && !item.data.region.type) {
                                return `区域：${item.data.region.region.name}`
                            } else {
                                return `暂无绑定`
                            }
                        }
                    }
                })
                this.findModel()
                this.onEvent()
            }
        },
        findModel() {
            this.modelList = this.render.find('.model')
            if (this.modelList.length > 0) {
                this.modelList.forEach(item => {
                    if (item.name === 'text') {
                        if (item.data && item.data.host && item.data.sensors) {
                            this.getSensorsData(item)
                        } else if (item.data && item.data.region && item.data.region.type) {
                            this.getRegionData(item)
                        }
                    }
                })
            }
        },
        async getSensorsData(item) {
            const sensor = item.data.sensors
            let data = {
                systemType: sensor.index,
                code: sensor.data.sensorid
            }
            const res = await getSensorData(data)
            item.text = res.data
            if (res.data !== '-') {
                if (res.data >= sensor.data.highTemperatureAlarmValue) {
                    model.fill('red');
                } else if (res.data >= sensor.data.highTemperatureWarnValue) {
                    model.fill('yellow');
                } else if (res.data <= sensor.data.lowTemperatureAlarmValue) {
                    model.fill('red');
                } else {
                    model.fill('green');
                }
            }
        },
        async getRegionData(item) {
            const region = item.data.region
            let data = {
                systemType: this.systemType,
                orgId: region.region.uuid,
                orgDataType: region.type.value
            }
            const res = await getRegionData(data)
            item.text = res.data
        },

        onEvent() {
            this.render.on(PointerEvent.DOUBLE_TAP, e => {
                if (e.target !== this.render) {
                    let obj = e.target.data
                    if (obj && obj.host && !obj.sensors) {
                        console.log('获取设备信息', obj)
                    } else if (obj && obj.region && !obj.region.type) {
                        this.getLeafer(obj.region.region)
                        // obj.region.region.id
                    } else {
                        console.log('不用获取')
                    }
                }
            })
        },
        /**
         * 切换右侧折叠状态
         * @method closeColl_right
         * @description 点击按钮时，切换右侧内容区域的折叠与展开状态
         * @returns {void}
         */
        closeColl_right() {
            this.collapsed_right = !this.collapsed_right
        },

    }
}
</script>
<!-- <script>
import { Leafer, Group, PointerEvent, Rect } from 'leafer-ui'
export default {
    data() {
        return {
            arr: []
        }
    },
    mounted() {
        this.init()
    },
    methods: {
        init() {
            const leafer = new Leafer({ view: this.$refs.leaferCanvas });

            const group = new Group({
                draggable: true
            });

            for (let i = 0; i < 3; i++) {
                group.add(new Rect({
                    width: 200,
                    height: 200,
                    x: 150 + i * 30,
                    y: 150 + i * 30,
                    fill: '#32cd79',
                }));
            }

            leafer.add(group);

            leafer.on(PointerEvent.MENU_TAP, e => {
                const children = group.children
                this.arr = JSON.parse(JSON.stringify(children))
                group.remove()
                this.arr.forEach(item => {
                    item.draggable = true
                    leafer.add(item)
                })
            });
        }
    }
}
</script> -->
<style scoped lang="less">
#leaferCanvas {
    display: block;
    width: 100%;
    height: 100%;
}

#components-layout-demo-basic {
    text-align: center;
    background: #F3F4FA;
    height: 100vh;
}

#components-layout-demo-basic .ant-layout-header {
    background: #fff;
}


#components-layout-demo-basic .ant-layout-sider {
    background: #ffffff;
    // height: calc(100vh - 120px);
    border-radius: 10px;
    margin: 10px;

    .fixd_btn_right {
        position: relative;
        right: 238px;
        top: 40%;
        transition: 0.2s;
        z-index: 10;
        border: none;
    }

    .fixd_btn_left_after {
        right: 0px;
        transition: 0.2s;
    }

}

#components-layout-demo-basic .ant-layout-content {
    // margin: 2px;
    padding-top: 5px;
}

#components-layout-demo-basic>.ant-layout:last-child {
    margin: 0;
}
</style>